<template>
  <div class="home">
    <h2>控制面板</h2>
    <!-- ka -->
    <div class="content">
      <div class="row">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="row">
              <div class="col-lg-3 col-xs-6">
                <div class="small-box bg-aqua">
                  <div class="inner">
                    <h3>{{ appointmentName }}</h3>
                    <p>下一位：{{ nextAppointmentName }}</p>
                  </div>
                  <div class="icon">
                    <i class="el-icon-time"></i>
                  </div>
                  <span href="" class="small-box-footer" @click="goAppoint">
                    更多
                    <i class="el-icon-right"></i>
                  </span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="row">
              <div class="col-lg-3 col-xs-6">
                <div class="small-box bg-green">
                  <div class="inner">
                    <h3>{{ patientName }}</h3>
                    <p>下一位：{{ nextPatientName }}</p>
                  </div>
                  <div class="icon">
                    <i class="el-icon-user-solid"></i>
                  </div>
                  <span href="" class="small-box-footer" @click="goPatient">
                    更多
                    <i class="el-icon-right"></i>
                  </span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="row">
              <div class="col-lg-3 col-xs-6">
                <div class="small-box bg-orange">
                  <div class="inner">
                    <h3>{{ diaName }}</h3>
                    <p>下一位：{{ nextDiaName }}</p>
                  </div>
                  <div class="icon">
                    <i class="el-icon-edit"></i>
                  </div>
                  <span href="" class="small-box-footer" @click="goDia">
                    更多
                    <i class="el-icon-right"></i>
                  </span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="row">
              <div class="col-lg-3 col-xs-6">
                <div class="small-box bg-purple">
                  <div class="inner">
                    <h3>{{ medicineName }}</h3>
                    <p>销量第二：{{ nextMedicineName }}</p>
                  </div>
                  <div class="icon">
                    <i class="el-icon-reading"></i>
                  </div>
                  <span href="" class="small-box-footer" @click="goMedicine">
                    更多
                    <i class="el-icon-right"></i>
                  </span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <div class="row">
        <div class="col-lg-7 connectedSortable">
          <!-- 公告通知 -->
          <div class="box" v-if="showNotice">
            <div class="box-header">
              <h3 class="box-title">公告通知</h3>
              <div class="pull-right box-tools">
                <div class="btn-group">
                  <button
                    class="btn btn-primary btn-sm dropdown-toggle"
                    data-toggle="dropdown"
                  >
                    <i class="el-icon-notebook-1" @click="goNotice"></i>
                  </button>
                  <ul class="dropdown-menu pull-right" role="menu">
                    <!-- <li><a href="../Notice/ViewList.aspx?active=34,37">公告通知</a></li> -->
                  </ul>
                </div>
                <button
                  class="btn btn-primary btn-sm"
                  data-widget="collapse"
                  @click="shrinkNotice"
                >
                  <i class="el-icon-remove-outline"></i>
                </button>
                <button
                  class="btn btn-primary btn-sm"
                  data-widget="remove"
                  @click="closeNotice"
                >
                  <i class="el-icon-circle-close"></i>
                </button>
              </div>
            </div>
            <div
              class="box-body table-responsive no-padding"
              v-show="noticeShow"
            >
              <el-table :data="tableData" style="width: 100%">
                <el-table-column label="发布" width="200">
                  <template slot-scope="scope">
                    <span>{{ scope.row.publisher }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="日期" width="200">
                  <template slot-scope="scope">
                    <span>{{ scope.row.date }}</span>
                  </template>
                </el-table-column>
                <el-table-column property="state" label="状态">
                  <template slot-scope="scope">
                    <el-tag
                      disable-transitions
                      type="danger"
                      v-if="scope.row.state == '紧急'"
                      >{{ scope.row.state }}</el-tag
                    >
                    <el-tag
                      disable-transitions
                      type="primary"
                      v-if="scope.row.state == '一般'"
                      >{{ scope.row.state }}</el-tag
                    >
                    <el-tag
                      disable-transitions
                      type="warning"
                      v-if="scope.row.state == '重要'"
                      >{{ scope.row.state }}</el-tag
                    >
                  </template>
                </el-table-column>
                <el-table-column label="标题" width="280">
                  <template slot-scope="scope">
                    <span>{{ scope.row.title }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="180">
                  <el-button>查看</el-button>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <!-- 订单统计 -->
          <div class="box box-default" v-if="showDia">
            <div class="box-header with-border">
              <h3 class="box-title">诊断统计</h3>
              <div class="box-tools pull-right">
                <button class="btn btn-primary btn-sm" data-widget="remove">
                  <i class="el-icon-circle-close" @click="closeDia"></i>
                </button>
              </div>
            </div>
            <div class="tabCont">
              <EchartLine :dataSource="lineData"></EchartLine>
            </div>
          </div>
          <!-- 日历 -->
          <div class="box box-primary" v-if="showDate">
            <div class="box-header">
              <div class="header-left">
                <i class="el-icon-date" id="date"></i>
                <h3 class="box-title">行事历</h3>
              </div>
              <div class="pull-right box-tools">
                <div class="btn-group">
                  <!-- <button
                    class="btn btn-primary btn-sm dropdown-toggle"
                    data-toggle="dropdown"
                  >
                    <i class="el-icon-notebook-1" @click="goNotice"></i>
                  </button> -->
                  <ul class="dropdown-menu pull-right" role="menu">
                    <!-- <li><a href="../Notice/ViewList.aspx?active=34,37">公告通知</a></li> -->
                  </ul>
                </div>
                <!-- <button class="btn btn-primary btn-sm" data-widget="collapse">
                  <i class="el-icon-remove-outline"></i>
                </button> -->
                <!-- <button
                  class="btn btn-primary btn-sm"
                  data-widget="remove"
                  @click="closeDate"
                >
                  <i class="el-icon-circle-close"></i>
                </button> -->
              </div>
            </div>

            <!--日历-----------------日历表 -->
            <div class="schedule-container">
              <el-calendar>
                <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
                <template slot="dateCell" slot-scope="{ date, data }">
                  <div
                    :class="data.isSelected ? 'is-selected' : ''"
                    @click="calItem(data.day)"
                  >
                    <p>
                      <!--这里原本有动态绑定的class，去掉-->
                      {{ data.day.split("-").slice(1).join("-") }}
                      <br />
                      <span
                        :class="
                          dealMyDate(data.day).grade == '紧急日程'
                            ? 'is-success'
                            : dealMyDate(data.day).grade == '一般日程'
                            ? 'is-common'
                            : 'is-danger'
                        "
                      >
                        {{ dealMyDate(data.day).content }}
                      </span>
                    </p>
                  </div>
                </template>
              </el-calendar>
              <el-dialog
                :title="editForm.day"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose"
              >
                <el-form
                  @submit.native.prevent
                  :ref="editForm"
                  :model="editForm"
                >
                  <el-form-item label="日程" prop="content">
                    <el-input v-model="editForm.content"></el-input>
                  </el-form-item>
                  <el-form-item label="性质" prop="grade">
                    <el-radio-group v-model="editForm.grade">
                      <el-radio label="一般日程"></el-radio>
                      <el-radio label="紧急日程"></el-radio>
                      <el-radio label="重要日程"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="callOf('editForm')">取 消</el-button>
                  <el-button
                    type="primary"
                    @click="
                      dialogVisible = false;
                      add();
                    "
                  >
                    确 定
                  </el-button>
                </span>
              </el-dialog>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import store from "@/store";
import EchartLine from "@/components/Line";
import { mapGetters } from "vuex";
import appointment from "@/router/appointment";
import medicine from "@/router/medicine";
export default {
  data() {
    return {
      showDate: true,
      showDia: true,
      showNotice: true,
      lineData: {
        xAxis: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
        yAxis: [
          {
            name: "客服数量",
            color: "#FF6F00",
            data: [10, 56, 24, 87, 45, 56, 24, 47, 51, 30, 40, 84],
          },
        ],
      },
      tableData: [
        {
          publisher: "总医院",
          date: "2023-02-29",
          state: "重要",
          title: "进行项目答辩",
        },
        {
          publisher: "总医院",
          date: "2023-02-16",
          state: "紧急",
          title: "周一上午全体员工会议",
        },
        {
          publisher: "分医院",
          date: "2023-02-1",
          state: "一般",
          title: "这周放假",
        },
        {
          publisher: "总医院",
          date: "2023-02-16",
          state: "重要",
          title: "周四一起学习vue",
        },
      ],
      //行事历
      resDate: [
        { date: "2023-02-20", content: "放假", grade: "一般日程" },
        { date: "2023-02-22", content: "去交电费", grade: "紧急日程" },
        { date: "2023-02-04", content: "去学习vue", grade: "重要日程" },
      ],
      dialogVisible: false,
      rcdata: [],
      editForm: {
        content: "",
        day: "",
        grade: "一般日程",
      },
      noticeShow: true,
      pageSize: 8,
      pageNum: 1,
      currentPage: 1,
      nextAppointmentName: "",
      appointmentName: "",
      patientName: "",
      nextPatientName: "",
      diaName: "",
      nextDiaName: "",
      medicineName: "",
      nextMedicineName: "",
    };
  },
  components: {
    EchartLine,
  },
  created() {
    this.diagnosis();
    //诊断管理
    this.$axios({
      method: "get",
      url: "/diagnosis/diagnosisManagement/findDiagnosisList",
      params: {
        currentPage: 1, //当前页数默认第一页
        pageSize: 7, //每页显示记录数
      },
    }).then((resp) => {
      this.total = parseInt(resp.data.data.total);
      // console.log(resp.data.data.list[0].patient);
      if (resp.data.data.list.length < 2) {
        this.diaName = resp.data.data.list[0].patient;
        this.nextDiaName = "暂无";
      } else {
        this.diaName = resp.data.data.list[0].patient;
        this.nextDiaName = resp.data.data.list[1].patient;
      }
    });

    this.appointmentWay(this.pageSize, this.pageNum);
    this.patientWay(this.currentPage, this.pageSize);
    this.medicineWay(1, 8);
  },

  methods: {
    //关闭日历
    closeDate() {
      this.showDate = true;
    },
    //关闭诊断统计
    closeDia() {
      this.showDia = false;
    },
    //关闭公告
    closeNotice() {
      this.showNotice = false;
    },
    //预约管理-------------------------------------------
    async appointmentWay(appointment) {
      let res = await this.$api.appointment.findAppointmentList({
        appointment,
      });
      if (res.data.data.list.length < 2) {
        this.appointmentName = res.data.data.list[0].sysPatient.name;
        this.nextAppointmentName = "暂无";
      } else {
        this.appointmentName = res.data.data.list[0].sysPatient.name;
        this.nextAppointmentName = res.data.data.list[1].sysPatient.name;
      }
      // console.log(res.data.data.list[0].sysPatient.name);
    },
    //患者管理---------------------------------------------
    async patientWay(currentPage, pageSize) {
      let res = await this.$api.appointment.findPatientList({
        currentPage,
        pageSize,
      });
      // console.log('患者管理----',res.data.data.list[0].name);
      if (res.data.data.list.length < 2) {
        this.patientName = res.data.data.list[0].name;
        this.nextPatientName = "暂无";
      } else {
        this.patientName = res.data.data.list[0].name;
      this.nextPatientName = res.data.data.list[1].name;
      }
    },

    //药品管理-------------------------------------------
    async medicineWay(currentPage, pageSize) {
      let res = await this.$api.medicine.getMedList({
        currentPage,
        pageSize,
      });
      // console.log("药品管理------", res.data.data.list[0].drugName);
     
      if (res.data.data.list.length < 2) {
        this.medicineName = res.data.data.list[0].drugName;
        this.nextMedicineName = "暂无";
      } else {
        this.medicineName = res.data.data.list[0].drugName;
      this.nextMedicineName = res.data.data.list[1].drugName;
      }
    },

    //诊断统计图------------------------------------------
    diagnosis() {
      this.$axios({
        //统计每月所有诊断信息曲线图
        method: "get",
        url: "/diagnosis/diagnosisManagement/countDiagnosisMonthByType",
        params: {
          type: "",
        },
      }).then((resp) => {
        // console.log(resp.data.data);
        let arr1 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        let indexArr = [];
        let arr = resp.data.data;
        let res = arr.map((item, index, arr) => {
          indexArr.push(parseInt(item.month.slice(4, 6)));
          return item.total;
        });
        for (let i = 0; i < indexArr.length; i++) {
          arr1.splice(indexArr[i] - 1, 1, res[i]);
        }
        this.lineData.yAxis[0].data = arr1;
        // console.log("-----arr2", this.arr2);
      });
    },
    //跳转公告列表
    goNotice() {},
    //隐藏显示按钮
    shrinkNotice() {
      console.log(111);
      this.noticeShow = !this.noticeShow;
      console.log(this.noticeShow);
    },

    //行事历
    calItem(d) {
      console.log("点击的日期是：", d);
      this.editForm.day = d;
      this.rcdata = this.dealMyDate(d);
      this.editForm.content = this.rcdata.content;
      this.editForm.grade = this.rcdata.grade;
      this.dialogVisible = true;
      console.log("sadsadasdasd是：", this.editForm, this.rcdata.index);
    },
    dealMyDate(v) {
      // console.log(v)
      let len = this.resDate.length;
      let res = [];
      for (let i = 0; i < len; i++) {
        if (this.resDate[i].date == v) {
          res.content = this.resDate[i].content;
          res.grade = this.resDate[i].grade;
          res.index = i;
          break;
        }
      }
      return res;
    },
    //    calClick(item){
    //         console.log(item)
    //         this.editForm.day = item.day
    //     },
    handleClose(done) {
      done();
    },
    add() {
      var a = {
        date: this.editForm.day,
        content: this.editForm.content,
        grade: this.editForm.grade,
      };

      if (this.rcdata.grade) {
        console.log("填入的日程", this.resDate, this.rcdata.grade, a);
        this.$set(this.resDate, this.rcdata.index, a);
        console.log("修改后的：", this.resDate);
      } else {
        this.resDate.push(a);
      }
    },
    callOf(formName) {
      console.log("sadad", formName);
      // this.$refs.formName.resetFields();
      // this.$refs['formName'].clearValidate()
      this.dialogVisible = false;
    },
    //跳转预约管理
    goAppoint() {
      this.$router.push("/appointment/appManage");
    },
    //跳转患者管理
    goPatient() {
      this.$router.push("/patient/paManage");
    },
    //跳转诊断管理
    goDia() {
      this.$router.push("/diagnosis/diaManage");
    },
    //跳转诊断管理
    goMedicine() {
      this.$router.push("/medicine/medManage");
    },
  },
};
</script>

<style lang="less" scoped>
h2 {
  padding-left: 15px;
  // padding-bottom: 15px;
}
.calendar-day {
  text-align: center;
  color: #202535;
  line-height: 30px;
  font-size: 12px;
}
.is-selected {
  color: #f8a535;
  font-size: 10px;
  margin-top: 5px;
}
.is-success {
  color: #67c23a;
}
.is-danger {
  color: #f56c6c;
}
.is-common {
  color: #909399;
}
#calendar
  .el-button-group
  > .el-button:not(:first-child):not(:last-child):after {
  content: "当月";
}

.home {
  margin: 10px;
}
.content {
  padding: 15px;
}

.col-lg-3 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
}
.col-xs-6 {
  width: 100%;
  float: left;
}
.small-box {
  border-radius: 2px;
  position: relative;
  display: block;
  margin-bottom: 20px;
  box-shadow: 0 1px 1px rgb(0 0 0 / 10%);

  h3 {
    font-size: 38px;
    font-weight: bold;
    margin: 0 0 10px 0;
    white-space: nowrap;
    padding: 5px;
  }
  .icon {
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
    position: absolute;
    top: 5px;
    right: 10px;
    z-index: 0;
    font-size: 80px;
    color: rgba(0, 0, 0, 0.15);
  }

  .inner {
    padding: 10px;
    color: #fff;
  }
  .small-box-footer {
    position: relative;
    text-align: center;
    padding: 3px 0;
    color: #fff;
    color: rgba(255, 255, 255, 0.8);
    display: block;
    z-index: 10;
    background: rgba(0, 0, 0, 0.1);
    text-decoration: none;
  }
  .small-box-footer:hover {
    filter: brightness(3);
  }
  &:hover .icon {
    transform: scale(1.1);
  }
}

.bg-aqua {
  background-color: #00c0ef !important;
}
.bg-green {
  background-color: rgba(22, 162, 22, 0.8) !important;
}
.bg-orange {
  background-color: rgb(233, 174, 57);
}
.bg-purple {
  background-color: rgb(57, 122, 233);
}

.box {
  position: relative;
  border-radius: 3px;
  background: #ffffff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
}
.box-header {
  color: #444;
  display: block;
  padding: 10px;
  // position: relative;
  display: flex;
  justify-content: space-between;
}
.box-title {
  display: inline-block;
  font-size: 20px;
  margin: 0;
  line-height: 1;
  margin-top: 3px;
}
.box-header > .box-tools {
  // position: absolute;
  right: 10px;
  top: 5px;
  font-size: 14px;
  line-height: 1.42857143;
}
.pull-right {
  float: right !important;
}
.pull-right > box-tools {
  display: flex;
}
.btn-group {
  display: inline-block;
}

.btn-sm {
  margin-left: 10px;
  cursor: pointer;
  font-size: 20px;
}

.el-table .cell {
  padding: none;
}
.chartBox {
  width: 30%;
  height: 50vh;
}
#date {
  margin-right: 10px;
}
</style>
